<template>
  <div class="home">
    <virtual-table :dataSource="dataSource" ref="vritualTable">
      <!-- <template slot="id" slot-scope="{ scope }">
        {{ scope.row.id }}
      </template>
      <template slot="idHeader" slot-scope="{ scope }">
        <div>
          {{ scope.column.property }}
          <span @click.stop="noop">
            <el-popover
              placement="top-start"
              title="筛选列表"
              width="200"
              trigger="click"
            >
              <template>
                <el-select size="mini" v-model="opearate">
                  <el-option :value="id.opearate">等于</el-option>
                  <el-option value="include">包含</el-option>
                </el-select>
                <el-input
                  v-model="value"
                  size="mini"
                  clearable
                  @change="myfilter('id', value, opearate)"
                />
              </template>
              <i slot="reference" class="el-icon-arrow-down"></i>
            </el-popover>
          </span>
        </div>
      </template> -->
      <template slot="name" slot-scope="{ scope }">
        <el-input size="mini" v-model="scope.row.name"></el-input>
        <!-- <el-button size="mini">{{ scope.row.name }}</el-button> -->
      </template>
      <template slot="nameHeader" slot-scope="{ scope }">
        <div>
          <span>
            {{ scope.column.property }}
          </span>
        </div>
      </template>
      <template slot="id" slot-scope="{ scope }">
        <span>
          {{ scope.row.id }}
        </span>
        <span>
          <el-popover
            placement="top"
            width="800"
            trigger="manual"
            v-model="scope.row.isShowPopver"
          >
            <div>
              <el-form
                :inline="true"
                :model="formInline"
                class="demo-form-inline"
              >
                <el-form-item label="投标价格（%）">
                  <el-input
                    v-model="formInline.user"
                    placeholder="投标价格"
                    size="mini"
                  ></el-input>
                </el-form-item>
                <el-form-item label="投标比例（%）">
                  <el-input
                    v-model="formInline.region"
                    placeholder="投标比例"
                    size="mini"
                  ></el-input>
                </el-form-item>
              </el-form>
              <el-button size="mini" @click="finish(scope)">完成</el-button>
              <el-button size="mini" @click="cancel(scope)">取消</el-button>
            </div>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              slot="reference"
              @click="showCurrentPopver(scope)"
            ></el-button>
          </el-popover>
        </span>
      </template>
      <!-- <template slot="idHeader" slot-scope="{ scope }">
        <span style="color: red">
          {{ scope.column.property }}
        </span>
      </template> -->

      <template slot="allHeader" slot-scope="{ scope }">
        <span style="color: orange">
          {{ scope.column.property }}
        </span>
        <el-button type="primary" size="mini">刷新</el-button>
      </template>
      <template slot="zipOperate">
        <el-button size="mini">mini</el-button>
      </template>
      <template slot="operateBtns" slot-scope="{ scope }">
        <el-button
          size="mini"
          type="text"
          :disabled="authButtons(scope, 'add')"
          icon="el-icon-plus"
          title="新增"
        ></el-button>
        <el-button
          size="mini"
          type="text"
          :disabled="authButtons(scope, 'edit')"
          icon="el-icon-edit"
        ></el-button>
        <el-button
          size="mini"
          type="text"
          :disabled="authButtons(scope, 'remove')"
          icon="el-icon-delete"
        ></el-button>
      </template>
    </virtual-table>
  </div>
</template>

<script>
// @ is an alias to /src
import SelfTable from "@/components/self-table";
import MyTable from "@/components/my-table";
import virtualTable from "@/components/virtual-table";
import { mockData } from "./utils";
export default {
  name: "HomeView",
  components: {
    SelfTable,
    virtualTable,
  },
  data() {
    return {
      dataSource: {
        list: mockData(0, 5000),
        index: true,
        cols: [
          { name: "id", prop: "id" },
          { name: "text", prop: "text" },

          {
            name: "全部",
            prop: "all",
            children: [
              { name: "日期", prop: "date" },
              { name: "名字", prop: "name" },
              { name: "province", prop: "province" },
            ],
          },
          { name: "city", prop: "city" },
          { name: "address", prop: "address" },
          { name: "zip", prop: "zip" },
          { name: "category", prop: "category" },
          { name: "desc", prop: "desc" },
          { name: "shop", prop: "shop" },
          { name: "shopId", prop: "shopId" },
        ],
        pageSize:500
      },
      formInline: {
        user: "",
        region: "",
      },
      value: "",
      opearate: "",
      id: {
        opearate: "=",
        value: "",
      },
      content: "",
    };
  },
  methods: {
    getT(o) {
      console.log(o.column.label);
      return o.column.label;
    },
    noop() {},
    showCurrentPopver(scope) {
      if(!this.scope){
        this.scope = scope;
      }

      this.scope.row.isShowPopver  = false
      scope.row.isShowPopver = true;
      this.formInline.user = scope.row.name;
      this.formInline.region = scope.row.text;
      this.scope = scope;
    },
    authButtons({ row }, operate) {
      let state = "";
      if (operate === "add") {
        state = 0;
      } else if (operate === "edit") {
        state = 1;
      } else {
        state = 2;
      }
      return String(row.id).includes(state);
    },
    myfilter(key, value, opearate) {
      this.$refs.vritualTable.filterKey(key, value, opearate);
    },
    finish(scope) {
      scope.row.name = this.formInline.user;
      scope.row.text = this.formInline.region;
      this.cancel(scope);
    },
    cancel(scope) {
      scope.row.isShowPopver = false;
    },
  },
};
</script>